<template>
  <CusCard
    name="窑尾排放浓度监测"
    :content-style="{ height: '267px' }"
    :use-long-bg="true"
    :hide-tab="true"
    :tab-list="[
      { label: '日', value: 0 },
      { label: '小时', value: 1 },
    ]"
  >
    <div class="emissionsMonitor-card">
      <Echarts
        style="height: 100%"
        :options="options"
      />
    </div>
  </CusCard>
</template>

<script>
import CusCard from './CusCard.vue'
import Echarts from './Echarts.vue'
export default {
  components: {
    CusCard,
    Echarts
  },
  data() {
    return {
      options: {
        title: {
          left: 20,
          top: 12,
          text: '%',
          textStyle: {
            color: '#688BB8',
            fontSize: 10
          }
        },
        legend: {
          show: true,
          top: 12,
          right: 20,
          textStyle: {
            color: '#B9C7E7',
            fontSize: 12,
            verticalAlign: 'middle'
          },
          icon: 'rect',
          itemWidth: 12,
          itemHeight: 4
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 50,
          left: 20,
          bottom: 15,
          right: 20,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['01', 2, 3, 4, 5, 6, 7],
          axisLine: {
            lineStyle: {
              color: 'rgba(212, 212, 216, 0.1)'
            }
          },
          axisLabel: {
            color: '#688BB8'
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          splitLine: {
            show: false, // 不显示网格线
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.10)'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '',
          axisLine: {
            // show: true,
            lineStyle: {
              color: '#688BB8'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.10)'
            }
          }
        },
        series: [
          {
            name: 'SO2',
            type: 'line',
            symbol: 'circle', // 设置标记的形状为圆形
            symbolSize: 6, // 设置标记的大小
            itemStyle: {
              color: '#B9C7E7'
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: 10
            },
            data: [20, 10, 33, 44, 65, 22, 33]
          },
          {
            name: 'NOX',
            type: 'pictorialBar',
            barWidth: '50%',
            symbol: 'triangle',
            itemStyle: {
              opacity: 0.3,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#285589' // 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#47A6FF' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              } // 渐变颜色
            },
            data: [20, 10, 33, 44, 65, 22, 33]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.emissionsMonitor-card {
  height: 100%;
}
</style>
